<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--semantic-ui的cdn引入-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>
<body>

<!--导航部分-->
<nav th:replace="_fragments ::menu" class="ui inverted attached segment">
    <div class="container">
        <div class="ui inverted stackable menu">

            <h2 class="ui teal header item m-padding-up-dowm-min">LOG</h2>

            <a href="" class="item"><i class="home icon"></i>首页</a>

            <a href="" class="item"><i class="edit icon"></i>分类</a>

            <a href="" class="item"><i class="tags icon"></i>标签</a>

            <a href="" class="item"><i class="print icon"></i>关于我</a>

            <!--搜索栏-->
            <div class="right item">
                <div class="ui icon inverted transparent input">
                    <i class="search link icon"></i>
                    <input type="text" placeholder="搜索">
                </div>
            </div>
        </div>
    </div>
</nav>

<!--中间内容-->
<div class="m-footer-padding-up-dowm-min">
    <div class="ui container" style="display: flex !important; flex-wrap: wrap !important;">

        <!-- 卡片 -->
        <div class="ui card transparent stereoscopic_effect show_detail animate__animated animate__fadeInLeft" style="margin: 40px !important;" th:each="picture : ${pictures}">
            <div class="image slideshow-container">
                <img th:src="@{${picture.address[0]}}" style="height: 250px !important;"/>
            </div>
            <div class="content">
                <a class="header" th:text="${picture.name}" th:href="@{/show_picture/{id}(id = ${picture.id})}">Stevie Feliciano</a>
                <div class="description" th:text="${picture.description}">
                    Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
                </div>
            </div>
            <div class="extra content">
                <i class="tag icon"></i>
                更新时间:<span th:text="${picture.updateTime}">2022-9-14</span>
            </div>
        </div>

    </div>
</div>

<!--底部footer-->
<footer th:replace="_fragments ::footer" class="ui inverted center aligned vertical segment m-footer-padding-up-dowm-min">
    <div class="container">
        <!--grid:横向分成16份,底下的元素为3+3+3+7-->
        <div class="ui divided  inverted grid">

            <div class="three wide column">
                <h4 class="ui inverted header">二维码</h4>
                <img src="..\static\images\二维码.png"  style="width: 80px;">
            </div>

            <div class="three wide column">
                <h4 class="ui inverted header">个人博客</h4>
                <div class="ui inverted list link">
                    <a href="#" class="item">1.0 xxx</a>
                    <a href="#" class="item">2.0 xxx</a>
                    <a href="#" class="item">3.0 xxx</a>
                </div>
            </div>

            <div class="three wide column">
                <h4 class="ui inverted header">联系我</h4>
                <div class="ui inverted list link">
                    <a href="#" class="item">微信:13776710591</a>
                    <a href="#" class="item">QQ:2899847639</a>
                    <a href="#" class="item">GitHub:xxxxxxx</a>
                </div>
            </div>

            <div class="seven wide column">
                <h4 class="ui inverted header">个人博客</h4>
                <p>
                    emmm,你要说点什么
                </p>
            </div>
        </div>

        <!--一条线-->
        <div class="ui inverted section divider"></div>
        <p>emmm,你要说点什么</p>

    </div>
</footer>

<!--引入jquery和semantic-ui-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</body>
</html>